<template>
    <div>
        <el-menu
            unique-opened
            :default-active="currentPath"
            :default-openeds="opened"
            class="el-menu-vertical"
            background-color="#191a23"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="collapse"
            :collapse-transition="collapseTransition"
        >
            <sub-tree :routes="routes" />
        </el-menu>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'
import SubTree from './SubTree'
import routes from "../../router/AsyncRoutes";

export default {
    name: "Index",
    components: {SubTree},
    data() {
        return {
            routes,
            opened: [],
            isCollapse: false,
            collapseTransition: false,
            currentPath: this.$router.currentRoute.value.path,
        };
    },
    computed: {
        ...mapGetters({
            collapse: 'getCollapse'
        })
    },
    watch: {
        $route() {
            this.currentPath = this.$router.currentRoute.value.path
        }
    },
    mounted() {
        this.opened.push(this.$router.currentRoute.value.matched[0].path);
        this.currentPath = this.$router.currentRoute.value.path;
        this.collapseTransition = true
    }
}
</script>

<style scoped>
    .el-menu-vertical {
        width: 98%;
        margin: 0 2%;
        padding: 0;
        border-right: none;
    }
    ::v-deep(.el-submenu__title:hover) {
        background-color: #6b6b6b !important;
    }
    /*隐藏文字*/
    ::v-deep(.el-menu--collapse  .el-submenu__title span) {
        display: none;
    }
    /*隐藏 > */
    ::v-deep(.el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow) {
        display: none;
    }

</style>
